<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>选择你喜欢的鼠标</title>
    <style>
        * {
            font-size: 16px;
            font-family: "Arial", "微软雅黑";
            line-height: 25px;
        }

        div {
            padding: 5px;
            text-align: center;
            width: 300px;
            display: inline;
        }

        img {
            width: 300px;
        }

        div span {
            display: block;
        }

        .mouse-title {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p> <span class="mouse-title">选择你喜欢的鼠标：</span> <br><input type="radio" name="mouse" onclick="mouse()">罗技——轨迹球<br>
        <input type="radio" name="mouse" onclick="mouse()">雷蛇——游戏鼠</p>
    <div><img src="" alt="" id="image" onclick="img()"><span></span></div>

    <script>
        // 设置相关的属性和获取相关的属性信息
        // getAttribute("属性名")   获取某个属性的值
        // setAttribute("属性名","属性值")  动态设置某个节点的属性值

        function mouse(){
            let ele = document.getElementsByName("mouse")
            let img = document.getElementById("image")
            if(ele[0].checked){
                console.log('111111');
                img.setAttribute("src","images/gj.jpg");
                // img.setAttribute("alt","罗技鼠标");
                img.nextElementSibling.innerHTML="罗技鼠标";
                
            }else{
                console.log('2222222');
                img.setAttribute("src","images/ls.jpg");
                img.setAttribute("alt","雷蛇鼠标");
                img.nextElementSibling.innerHTML="雷蛇鼠标";               
            }
        }

        function img(){
            let alt  = document.getElementById("image").getAttribute("alt");////为获取到==null
            alert(alt)
        }
    </script>

</body>

</html>